import React, { PureComponent } from 'react';
import { StyleSheet, Text, View, Image, ScrollView, RefreshControl, TouchableOpacity,InteractionManager } from 'react-native';
import GoodsView from './GoodsView'
import GoGroupPurchaseView from './GoGroupPurchaseView'
import CommentsView from './CommentsView'
import screen from '../../../../common/screen'
import SpacingView from '../../../../widget/SpacingView'
import color from '../../../../widget/color'
type Props = {
}
type State = {
    groupCounts: []
}
class DetailScene_GroupPurchase extends PureComponent<Props, State>{

    // static navigationOptions = ({navigation}) => ({
    //     title:navigation.state.params.title
    // })

    constructor(props: Object) {
        super(props)
        this.state = {
            isRefreshing: false,
            groupCounts: []
        }
       
    }
    //页面加载后调用请求数据的方法
    componentDidMount() {
        this.requestData()
        //页面加载动画完成之后才会调用这里面的方法
        // InteractionManager.runAfterInteractions(()=>{
        //     this.props.navigation.setParams({title:'加载中'})  //页面加载完成之前标题
        // })
    }
    //下拉刷新
    pullRefresh() {
        setTimeout(() => {
            this.setState({ isRefreshing: false })
        }, 2000)
    }
    // 发送请求获取商品列表数据，用了async() await 这个语法后，response返回的是网络结果
    requestData = async () => {
        try {
            let json = [
                {
                    "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
                    "title": "沃橘",
                    "successcount": 10,
                    "price": 69.00
                },
                {
                    "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
                    "title": "沃橘",
                    "successcount": 10,
                    "price": 69.00
                },
                {
                    "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
                    "title": "沃橘",
                    "successcount": 10,
                    "price": 69.00
                }
            ]
            let infos = []
            for( let i = 0; i < 2; i ++)
            {
                infos.push(json[i])
            }
            //  this.setState({discounts:json.data})
            this.setState({ groupCounts: infos })
        } catch (error) {
            alert('error' + error)
        }
    }
    render() {
        return (
            <View style={styles.container}>
                {/*轮播图*/}
                <ScrollView refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={() => this.requestData()}
                        tintColor='gray'
                    />
                }>
                    <GoodsView />
                    <View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row', height: 50, borderTopWidth: 2, borderColor: color.gray }}>
                        <View style={styles.midImg}><Text>好友拼单</Text></View>
                        <View style={styles.midImg}><Text>人满发货</Text></View>
                        <View style={styles.midImg}><Text>人不满退款</Text></View>
                    </View>
                    <SpacingView />
                    <GoGroupPurchaseView info={this.state.groupCounts} />
                    <SpacingView />
                    <CommentsView info={this.state.groupCounts} />
                    <SpacingView />
                    <View style={{ flexDirection: 'row', height:screen.height * 0.07,}}>
                        <View style={{ flex: 1,justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{color:'black'}}>还能买啥</Text>
                        </View>
                        <TouchableOpacity style={{ flex: 2, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FF6A6A' }}>
                            <View>
                                <Text>¥ 4000.00</Text>
                                <Text>单独购买</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flex: 2, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
                            <View>
                                <Text>¥ 100.00</Text>
                                <Text>发起拼团</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: screen.width,
        height: screen.height,
        backgroundColor: 'white',

    },
    midImg: {
        height: 40,
        marginTop: 5,
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        backgroundColor: 'yellow'
    }
})
export default DetailScene_GroupPurchase